/*
 * @Author: nengwu 409791297@qq.com
 * @Date: 2020-06-28 11:24:09
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-06 16:39:42
 * @description:
 */

import React from 'react'
import {
  View,
  ActivityIndicator,
  Text,
  TouchableWithoutFeedback,
  TouchableOpacity
} from 'react-native'
import { useDispatch } from 'react-redux'
import { Image } from 'react-native-elements'
import { StackActions } from '@react-navigation/native'
import { useNavigation } from '@react-navigation/native'
import AntDesign from 'react-native-vector-icons/AntDesign'

import styles from './styles'
import * as userActions from '@/actions/user'

const closeImg = require('@/assets/images/news-close.png')

// artType: 1视频，2文本，3图文
const LeftBottomTag = props => {
  let text = ''
  if (props.topping === 1) {
    text = '热'
  }
  if (props.topping === 2) {
    text = '顶'
  }
  return (
    <View style={styles.tag}>
      <Text style={styles.tagText}>{text}</Text>
    </View>
  )
}

const NewsItem = props => {
  const navigation = useNavigation()
  const dispatch = useDispatch()
  const coverImgAry = props.coverImgs ? props.coverImgs.split(',') : []

  const _renderImgList = () => {
    return coverImgAry.map((item, index) => {
      return (
        <View
          key={index}
          style={
            index === coverImgAry.length - 1 ? styles.imgBoxLast : styles.imgBox
          }
        >
          <Image
            source={{
              uri: item
            }}
            style={styles.listImg}
            PlaceholderContent={<ActivityIndicator />}
          />
        </View>
      )
    })
  }

  // 添加收藏记录
  const _addHistory = () => {
    dispatch(
      userActions.addHistory(props.id, props.title, props.coverImgs, props.type)
    )
  }

  const onDel = e => {
    e.stopPropagation()
    console.log('删除新闻')
  }

  const onClickNews = () => {
    _addHistory()
    if (props.inDetail) {
      const pushAction = StackActions.push('NewsDetail', { id: props.id })
      navigation.dispatch(pushAction)
    } else {
      navigation.navigate('NewsDetail', {
        id: props.id
      })
    }
    
  }
  return (
    <TouchableOpacity onPress={onClickNews}>
      <View style={styles.wrap}>
        <View style={styles.wrapTop}>
          <View style={styles.title}>
            <Text
              style={styles.titleText}
              ellipsizeMode="tail"
              numberOfLines={2}
            >
              {props.title}
            </Text>
          </View>
          {props.type === 3 && coverImgAry.length === 1 ? (
            <View style={styles.rightImageWrap}>
              <Image
                source={{
                  uri: coverImgAry[0]
                }}
                style={styles.rightImage}
                PlaceholderContent={<ActivityIndicator />}
              />
            </View>
          ) : null}
        </View>
        {props.type === 3 && coverImgAry.length === 3 ? (
          <View style={styles.imgListWrap}>{_renderImgList()}</View>
        ) : null}
        {props.type === 1 ? (
          <View style={styles.video}>
            <Image
              source={{
                uri: coverImgAry[0]
              }}
              style={styles.videoBanner}
              PlaceholderContent={<ActivityIndicator />}
            />
            <View style={styles.playBtn}>
              <AntDesign name="caretright" color="#fff" size={30} />
            </View>
          </View>
        ) : null}

        {props.topping ? (
          <View style={styles.wrapBottom}>
            <View style={styles.leftBottomWrap}>
              <LeftBottomTag topping={props.topping} />
            </View>
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  )
}

export default NewsItem
